<script setup lang="ts">
import axios from 'axios';
import { onMounted, ref, } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter()
const cmore = ref(true);
const fmore = ref(true);
const icons = ref([])
const showImg = ref(false)
const showAllLogs = ref(false)
const friends = ref([
])


const showPreview = (url: any) => {
    icons.value.push(url);
    showImg.value = true;
    console.log(icons.value);

}

const getData = async () => {
    const { data } = await axios.get('http://localhost:3000/zhy/getData')
    friends.value = data.data
}

onMounted(() => {
    getData()
})


</script>
<template>
    <div class="friends-container">
        <div class="info" v-for="item in friends" :key="item._id">
            <img class="photo" :src="item.photo" alt="">
            <div class="head">
                <p class="name" v-html="item.name"></p>
                <van-button class="follow" size="mini">关注</van-button>
            </div>
            <p class="content">
                <span v-if="item.content.length > 100 && cmore">
                    {{ item.content.slice(0, 100) }}
                    <span class="cmore" @click="cmore = !cmore">4
                        ...
                    </span>
                </span>
                <span v-else v-html="item.content"></span>
                <span class="cmore" v-if="!cmore" @click="cmore = !cmore">收起</span>
            </p>
            <div class="files" v-if="item.files.length > 4 && fmore">
                <van-image class="file" v-for="(file, index) in item.files.slice(0, 4)" @click="showPreview(file)"
                    :key="index" :src="file" alt="" />
                <img class="filelast" :style="{ 'opacity': item.files.length > 5 ? '0.5' : '1' }" :src="item.files[4]"
                    alt="">
                <van-image-preview v-model="showImg" :images="icons"></van-image-preview>
                <h3 class="fmore1" @click="fmore = !fmore" v-if="item.files.length > 5">+</h3>
            </div>

            <div class="files" v-else>
                <img class="file" v-for="(file, index) in item.files" :key="index" :src="file" alt="" />
                <h3 class="fmore2" v-if="item.files.length > 5" @click="fmore = !fmore">收起</h3>
            </div>
            <div class="addr">
                <p v-html="item.address"></p>
            </div>
            <div class="date">
                <p v-html="new Date(item.date).toLocaleString('zh-CN', { timeZone: 'Asia/Shanghai' })"></p>
                <div>
                    <span class="love">{{ item.lovenum }} <van-icon name="like-o" /></span>
                    <span class="logs">
                        {{ item.logs.length }}
                        <van-icon name="comment-o" :style="item.logs.length > 0 ? 'color:#7d93b8' : ''" />
                    </span>
                </div>
            </div>

            <div class="logs-container">
                <div class="logs" v-for="(log, index) in item.logs" :key="index">
                    <p>
                        <span class="logs-user" v-html="log.user + ':'"></span>

                        <span class="logs-content" v-html="log.content"></span>
                    </p>
                    <p class="reply" v-if="log.reply">
                        <span class="logs-name" v-html="item.name"></span>
                        回复
                        <span class="logs-user" v-html="log.user + ':'"></span>
                        <span class="logs-reply" v-html="log.reply"></span>
                    </p>
                </div>
            </div>


        </div>
        <van-button class="add-btn" size="large" @click="router.push('/addfriend')">发朋友圈</van-button>
    </div>
</template>

<style scoped>
.friends-container {
    overflow: auto;
    height: 54vh;
}

.info {

    align-items: center;
    width: 90vw;
    margin: 10px auto;
}

.head {
    width: 260px;
    font-size: 14px;
    position: relative;
    left: 60px;
    top: -48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.photo {
    width: 45px;
    height: 45px;
    border-radius: 5px;
    border: 1px solid #eee;
}

.name {
    font-size: 14px;
    color: #676598;
    font-weight: bold;
    height: 14px;
}

.follow {
    border-radius: 40px;
    font-size: 14px;
    width: 60px;
    border: 1px solid #8ea5da;
}

.content {
    font-size: 14px;
    width: 63%;
    position: relative;
    left: 60px;
    top: -45px;
    word-break: normal;
    overflow-wrap: break-word;
}

.files {
    width: 63%;
    position: relative;
    left: 60px;
    top: -45px;
    word-break: normal;
    overflow-wrap: break-word;
}

.file,
.filelast {
    width: 65px;
    height: 60px;
    border-radius: 5px;
    margin-left: 4px;
}



.cmore {
    color: #999;
    cursor: pointer;
    font-size: 16px;
}

.fmore1 {
    color: #999;
    cursor: pointer;
    position: relative;
    top: -15px;
    display: inline-block;
    font-size: 40px;
    left: -45px
}

.fmore2 {
    color: #999;
    cursor: pointer;
    position: relative;
    top: -10px;
    display: inline-block;
}

.addr {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 63%;
    margin: 0 auto;
    font-size: 12px;
    top: -45px;
    color: #606672;
}

.date {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 63%;
    margin: 0 auto;
    font-size: 14px;
    position: relative;
    top: -40px;
    color: #999;
}

.love {
    margin-right: 5px;
}

.logs-container {
    margin-left: 5px;
    font-size: 12px;
    width: 63%;
    word-break: normal;
    overflow-wrap: break-word;
    position: relative;
    left: 60px;
    top: -30px;
    background: #f9f9f9;
    align-items: center;
}

.logs-name {
    color: #676598
}

.logs-user {
    color: #676598;
}

.add-btn {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: #56c1fc;
    position: absolute;
    right: 20px;
    bottom: 70px;
    color: white;

}
</style>

<!-- 
    {
        _id: 1,
        photo: "https://q7.itc.cn/q_70/images03/20240401/0e09d0019732463ba97af4540702e1e4.jpeg",
        name: "123213",
        content:
            "112313123123112313123123112313123112312323112313123123112313123123112313123123213123213112313123123112313123123",
        files: [
            "https://img95.699pic.com/photo/50017/0822.jpg_wh860.jpg",
            "https://bpic.588ku.com/back_origin_min_pic/20/04/19/f753e29e3dbe2ad75b8f6d6053199faa.jpg!/fw/750/quality/99/unsharp/true/compress/true",
            "https://img95.699pic.com/photo/50017/0822.jpg_wh860.jpg",
            "https://img95.699pic.com/photo/50017/0822.jpg_wh860.jpg",
            "https://img95.699pic.com/photo/50017/0822.jpg_wh860.jpg",
            "https://img95.699pic.com/photo/50017/0822.jpg_wh860.jpg",
            "https://ts1.cn.mm.bing.net/th/id/R-C.633901d07a3d18cdf6d58a0ccc74078d?rik=8evNNQvJj91%2bjg&riu=http%3a%2f%2fimg.hkwb.net%2fatt%2fsite2%2f20120308%2f633901d07a3d18cdf6d58a0ccc74078d.jpg&ehk=mupUGFlfxfEilMIkHoDFPVYnfR%2bSaF86fmgOkvvU8YM%3d&risl=&pid=ImgRaw&r=0",
        ],
        address: "南国水乡",
        date: "08-08 08:29",
        lovenum: 82,
        logs: [
            {
                _id: 1,
                user: "123",
                content: "123123123123123123333",
                date: "08-09 08:29",
                reply: "2223266666666666666"
            },
            {
                _id: 2,
                user: "1223",
                content: "1223",
                date: "08-09 08:29",
                reply: ""
            },
            {
                _id: 3,
                user: "1233",
                content: "1323",
                date: "08-09 08:29",
                reply: ""
            }
        ]
    }
-->